<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <link href="css/elementui/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="app">
        <el-table
                :data="orders"
                style="width: 100%">
            <el-table-column
                    label="编号"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="用户姓名"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.username }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品名称"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.goods.name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品价格"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.goods.price }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
</div>
    <script src="js/vue/vue.js"></script>
    <script src="js/elementui/index.js"></script>
    <script src="js/axios/axios.min.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    orders:[]
                }
            },
            methods:{
                loadOrders(){
                    axios.get("http://localhost:9999/orders")
                        .then(value => {
                            this.orders = value.data;
                        })
                }
            },
            mounted(){
                this.loadOrders();
            }
        })
    </script>
</body>
</html>